import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';

const getOption = () => ({
  title: {
    text: '考核项目达成率',
    textStyle: {
      color: '#000',
      fontWeight: 500,
      fontSize: '20px',
      fontFamily: 'PingFangSC-Medium',
      margin: '15px 20px 0px',
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {},
  grid: {
    left: '2%',
    right: '4%',
    bottom: '3%',
    top: '12%',
    containLabel: true,
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    axisLabel: {
      formatter: '{value}%',
    },
    splitLine: {
      show: false,
    },
  },
  yAxis: {
    type: 'category',
    data: ['中高档系列', '重点产品销量', '分布点', '签约点', '产品组合', '重点产品铺货'],
    axisLine: {
      // 轴线
      show: true,
      lineStyle: {
        color: 'rgba(0, 0, 0, 0.45)', // x轴轴线颜色
      },
    },
    axisTick: {
      // 轴刻度
      show: false,
    },
    splitLine: {
      show: false,
    },
  },
  series: [
    {
      type: 'bar',
      data: [50, 25, 30, 40, 60, 80],
      barWidth: '40%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: '#F5A9A9',
          },
          {
            offset: 0.5,
            color: '#EC7979',
          },
          {
            offset: 1,
            color: '#ce0e2d',
          },
        ]),
      },
    },
  ],
});

export const ImportEcharts = () => {
  const chartRef = useRef(null);
  useEffect(() => {
    const chartDom = chartRef.current;
    const myChart = echarts.init(chartDom);
    myChart.clear();
    const option = getOption();
    myChart.setOption(option);

    return () => {
      myChart.dispose(); // 在组件卸载时清理echarts实例
    };
  }, []);

  return (
    <div>
      <div ref={chartRef} style={{ height: '300px' }} />
    </div>
  );
};
